<template>
  <div>
 <div class="addCont">
          <h3 class="w">产品信息</h3>
          <div class="addCont-main">
              <div></div>
              <!-- 开票信息 -->
              <div class="addTicket w">
                  <div class="addTicket-one">
                      <h3>开票信息</h3>
                      <div class="addTicket-change">
                        <span v-for="(ins2,v2) in warr2" :key="v2">
                            <i :class="{'gren-icon':warrbol[v2]}" @click="xuan(v2)"></i>{{ins2}}
                        </span>
                      </div>
                      <div class="addThead">
                          <label>发票抬头 : </label>
                          <input type="text" v-model="addhead"/>
                          <label><i>*</i>请填写后认真核对发票信息</label>
                      </div>

                  </div>
                  <div class="addTicket-two">
                      <h3>添加订单备注</h3>
                      <div class="addNote">
                          <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息" v-model="addnote"/>
                      </div>
                      
                  </div>


              </div>

          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'FaTick',
    data(){
        return{
            warrbol:[],
            ins:'',
            warr2:['不需要','个人','单位'],
            addnote:'',
            bb:'',
            id:17099,
            addhead:'',
            addTimer:['10:00-13:00','11:00-14:00','12:00-15:00','13:00-16:00','14:00-17:00','15:00-18:00','16:00-19:00' ,'17:00-20:00','18:00-21:00','19:00-22:00'],
        }

    },
    methods:{
        xuan(v2){
            console.log(v2);
            this.ins=v2;
            for(var i=0;i<this.warr2.length;i++){
                this.warrbol[i]=false;
            }
            this.$set(this.warrbol,v2,true);
        }
    }

}
</script>

<style scoped>
/* 添加收货地址 */

/*  */
.tijian{
    position: absolute;
    top: -11px;
    left: calc(50% - 10px);
    height: 20px;
    width: 20px;
    border-right:1px solid #d3d3d3 ;
    border-top:1px solid #d3d3d3 ;
    background-color: #f8fff7;
    transform: rotate(-45deg);
}
.timers{
    width: 505px;
    background-color: #f8fff7;
    border: #d3d3d3 1px solid;
    padding: 20px;
    position: relative;
    margin:20px 0 20px 150px;
}
.timers .timersb{
    width: 100%;
    border-top: #d3d3d3 1px solid;
    border-bottom: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    margin-bottom: 20px;
}
.timers .timersb span{
    text-align: center;
    display: inline-block;
    width: 100px;
    line-height: 30px;
    background-color: #fff;
}
.timers .timersb span:nth-child(-n+5){
    border-right: #d3d3d3 1px solid;
}
.timers .timersb span:nth-last-child(-n+5){
    border-right: #d3d3d3 1px solid;
}
.timers .timersb span:nth-child(-n+5){
    border-bottom: 1px solid #d3d3d3;
}
.tim-btn{
    width: calc(100% - 240px);
    padding: 0 120px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    display: flex;
    justify-content: space-evenly;
    /* background-color: #fff; */
    
}
.tim-btn span{
    display: inline-block;
    width: 90px;
    border-radius: 8px;
    text-align: center;
}
.tim-btn span:nth-child(1){
    background-color: #999;
}
.tim-btn span:nth-child(2){
    background-color: #f08200;
}
/* 送达时间 */

.addtime{
    width: 1280px;
    text-align: left;
    border-bottom: 1px solid #d3d3d3;
    margin: 0 auto 226px;
}
.addtime .colos{
    color: #498e3d;
    font-size: 18px;
    line-height: 60px;
}
.addtime-txt{
    font-size: 16px;

}
.addtime-txt>h3>span{
    line-height: 33px;
    font-size: 16px;
    color: #666;
}
.addtime-txt>h3>span>i{
    color: #333;
    margin-left: 20px;
}
.addtime-txt>h3 span:nth-of-type(2){
    line-height: 33px;
    font-size: 16px;
    color: #498e3d;
    margin-left: 5px;
}
.addtime-txt>h3 span:nth-of-type(2) i{
    color: #333;
    height: 22px;
    width: 22px;
    display: inline-block;
    /* vertical-align: middle; */
    position: relative;
    top: 5px;
    background: url(../../../assets/imgs/green-note.png) no-repeat 0 0;
    margin-right: 9px;
}

/* 票据 */
.addCont{
    width: 100%;
    margin-top:30px ;
}
.addCont>h3{
    line-height: 59px;
    border-top: 1px solid #e9e9e9;
    font-size: 18px;
    text-align: left;
}
/* ===2 */
.addCont-main{
    width: 100%;
}
.addTicket{
height: 274px;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
margin: 30px 0 18px;
/* background-color: #f0f; */
}
.addTicket-one>h3{
    line-height: 38px;
    padding-top: 11px;
    font-size: 18px;
    color: #666;
    text-align: left;
}
.addTicket-change{
       font-size: 14px;
    color: #666;
    background-color: #fff;
    text-align: left;
    line-height: 36px;
    margin-bottom: 10px;
}
.addTicket-change span{
    padding-left: 1px;
    margin-right: 40px;
}
.addTicket-change span i{
    display: inline-block;
    /* vertical-align: middle; */
    /* position: absolute;
    top: calc(50% - 8px);
    left: 0; */
    position: relative;
    top: 3px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/green-radio.png) no-repeat 0 0;
    margin-right: 10px;
}
.addTicket-change span i.gren-icon{
    display: inline-block;
    /* vertical-align: middle; */
    /* position: absolute;
    top: calc(50% - 8px);
    left: 0; */
    position: relative;
    top: 3px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/green-radio.png) no-repeat -24px 0;
    margin-right: 10px;
}
.addThead{
    text-align: left;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #e9e9e9;
}
.addThead input{
    height: 35px;
    width: 370px;
    border: #d3d3d3 1px solid; 
    margin: 0 16px 19px 4px;
}
.addThead label:nth-of-type(2) i{
    color: #f00;
}
/*  */
.addTicket-two>h3{
    line-height: 59px;
    color: #666;
    font-size: 18px;
    text-align: left;
}
.addTicket-two .addNote{
    line-height: 33px;
    text-align: left;
}
.addNote input{
    height: 33px;
    width: 616px;
    padding-left: 10px;
    border: 1px solid #d3d3d3;
}
/* 地址 */
.address{
    width: 100%;
    
}
.w-toph3{
    line-height: 58px;
    color: #6666;
    font-size: 18px;
    text-align: left;
    position: relative;
}
.w-toph3 span:nth-child(2){
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
    line-height: 30px;
    width: 90px;
    text-align: center;
    font-size: 14px;
    background-color: #f08200;
    color: #fff;
}
/* 内容 */
.w-top-list div{
   width: 100%;
}
.w-list div{
    line-height: 36px;
    font-size: 14px;
}
.w-top-list div.w-list2{
    height: 36px;
    line-height: 36px;
    width: 1278px;
    background-color: #f4fff2;
    margin-bottom: 10px;
    border: 1px solid #f4fff2;
    position: relative;
}
.w-top-list div.w-list{
    height: 36px;
    line-height: 36px;
    width: 1278px;
    background-color: #f4fff2;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    position: relative;
    
}
.w-list div.list-one{
    padding-left: 46px;
    width: calc(100% - 276px);
    text-align: left;
    color: #666;
    position: relative;
}
.w-list .list-one i{
    position: absolute;
    top: calc(50% - 8px);
    left: 17px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/green-radio.png) no-repeat 0 0;
    /* background-color: #00f; */
}
.w-list .list-one .list-icon{
    background: url(../../../assets/imgs/green-radio.png) no-repeat -24px 0;
}
.w-list div.list-two{
    position: absolute;
    right: 0;
    top: 0;
    width: 214px;
    text-align: right;
    padding-right: 16px;
}

.w-list div.list-two span.list-mo{
    color: #f08200;
}
.w-list div.list-two span.list-gai{
    color: #498e3d;
    margin-left: 24px;
}
/*隐藏  */
.w-top-list .list-hide{
    line-height: 37px;
    color: #498e3d;
    text-align: left;
    font-size: 16px;
    padding-bottom: 19px;
}
.list-hide span i{
    display: inline-block;
    height: 11px;
    width: 12px;
    margin: 0 19px 0 11px;
}
.list-hide span:nth-child(1) i{
    background: url(../../../assets/imgs/green-jian.png) no-repeat 0 0;
}
.list-hide span:nth-child(2) i{
    background: url(../../../assets/imgs/green-jian.png) no-repeat 0 0;
    transform: rotate(180deg);
}

/* public */
.w{
    width: 1280px;
    margin: 0 auto;
}
.wb{
    width: 100%;
   border-bottom: 1px solid #ddd;
}
</style>